<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>highlight.js developer</title>

  <link rel="stylesheet" href="../src/styles/default.css">

  <style>
    .editor textarea {
      display: block; width: 100%;
      height: 15em;
    }

    pre code,
    pre output {
      display: block;
    }

    pre output {
      display: block; overflow: auto;
      padding: 0.5em;
      background: #F0F0F0;
    }

    .hljs-debug {
      color: red; font-weight: bold;
    }
  </style>
</head>
<body>
  <h1>highlight.js developer</h1>

  <div class="editor">
    <div>
      <textarea>Put code here…</textarea>
      <p>
        <button>Update highlighting</button>
        Language: <select class="languages"><option value="">(Auto)</option></select>
      </p>
    </div>
    <div>
      <p>Rendered in <span class="rendering_time">...</span> ms [<span class="rendering_stats">...</span>]</p>
      <pre><code class="hljs">...</code></pre>
    </div>
    <div>
      <p>Markup
      <pre><output>...</output></pre>
    </div>
  </div>

  <script src="../build/highlight.pack.js"></script>
  <script src="../demo/jquery-2.1.1.min.js"></script>

  <script>
    $(document).ready(function() {
      var select = $('.languages');
      hljs.listLanguages().forEach(function(l) {
        select.append('<option>' + l + '</option>');
      });

      $('.editor button').click(function(e) {
        var editor = $(this).parents('.editor');
        var language = editor.find('.languages').val();
        var source = editor.find('textarea').val();
        var start_time = +new Date();
        var result = hljs.getLanguage(language) ? hljs.highlight(language, source, true) : hljs.highlightAuto(source);
        var rendering_time = +new Date() - start_time;
        editor.find('.hljs').html(result.value);
        var rendering_stats = result.language + ': ' + (result.relevance || result.r);
        if (result.second_best) {
            rendering_stats += ', ' + result.second_best.language + ': ' + (result.second_best.relevance || result.second_best.r);
        }
        editor.find('.rendering_stats').text(rendering_stats);
        editor.find('.rendering_time').text(rendering_time);
        editor.find('output').text(result.value);
        SourceStore.save(source, language);
      });
    });

    var SourceStore;
    (function(){
      SourceStore = {
        save: function(source, lang){
          localStorage.setItem(key_SOURCE, source);
          localStorage.setItem(key_LANG, lang);
        },
        resolve: function(){
          return [
            localStorage.getItem(key_SOURCE),
            localStorage.getItem(key_LANG)
          ];
        }
      };
      var key_SOURCE = 'hljs-source';
      var key_LANG = 'hljs-lang';
      $(function(){
        var data = SourceStore.resolve();
        if (data == null) return;
        $('.editor textarea').val(data[0]);
        $('.editor .languages').val(data[1]);
        $('.editor button').click();
      });
    }());
  </script>
</body>
</html>
